<template>
  <div class="register-container">
    <div class="register-header">
      <h1 class="register-title">考试系统</h1>
      <p class="register-subtitle">注册新账号</p>
    </div>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入用户名' }]"
        />
        <van-field
          v-model="phone"
          type="tel"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '请输入手机号' },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
          ]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[
            { required: true, message: '请输入密码' },
            { min: 6, message: '密码不能少于6个字符' },
          ]"
        />
        <van-field
          v-model="confirmPassword"
          type="password"
          name="confirmPassword"
          label="确认密码"
          placeholder="请再次输入密码"
          :rules="[
            { required: true, message: '请确认密码' },
            {
              validator: validateConfirmPassword,
              message: '两次输入的密码不一致',
            },
          ]"
        />
      </van-cell-group>

      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          :loading="loading"
        >
          注册
        </van-button>
        <div class="register-options">
          <van-button class="login-btn" text type="primary" @click="goToLogin">
            已有账号？返回登录
          </van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import { showToast } from "vant";
import { useRouter } from "vue-router";

import { authApi } from "@/api/modules/auth";
import { EnumStatusCode } from "@shared/constant/enum";

import { useUserStore } from "../../stores/user";

const router = useRouter();
const userStore = useUserStore();

const username = ref("");
const phone = ref("");
const password = ref("");
const confirmPassword = ref("");
const loading = ref(false);

// 验证确认密码
const validateConfirmPassword = () => {
  return password.value === confirmPassword.value;
};

// 提交表单
const onSubmit = async () => {
  if (password.value !== confirmPassword.value) {
    showToast("两次输入的密码不一致");
    return;
  }

  loading.value = true;
  try {
    const res = await authApi.register({
      username: username.value,
      phone: phone.value,
      password: password.value,
    });
    debugger;
    if (res.code === EnumStatusCode.BAD_REQUEST) {
      showToast(res.message || "注册失败，请重试");
    } else if (res.code === EnumStatusCode.CREATED) {
      showToast("注册成功，请登录");
      router.replace("/login");
    } else {
      showToast(res.message || "注册失败，请重试");
    }
  } catch (error) {
    console.error("注册失败", error);
  } finally {
    loading.value = false;
  }
};

// 跳转到登录页
const goToLogin = () => {
  router.push("/login");
};
</script>

<style scoped>
.register-container {
  padding: 30px 20px;
}

.register-header {
  text-align: center;
  margin-bottom: 40px;
}

.register-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #323233;
}

.register-subtitle {
  font-size: 16px;
  color: #969799;
  margin: 0;
}

.register-options {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.login-btn {
  font-size: 14px;
}
</style>
